﻿
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="./css/style.css">
        <script src="./js/jquery-1.7.2.min.js" type="text/javascript"></script>
        <script src="./js/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
    </head>
    <body>
        <script>
            var i = 1;
            $(function() {
                $( ".drag" ).draggable({ revert: true});
                $( "#center" ).droppable({
                    drop: function( event, ui ) {
                        
                        if(ui.draggable.attr("class").search("dropped") == -1){
                            var test = ui.draggable.clone().draggable().css({left:0,top:0,"float":"left",position:"absolute","z-index":"1"});
                            test.addClass("dropped");
                            test.removeClass("drag");
                            test.draggable({containment: "#center", scroll: false  });
                            test.attr("onclick","selected(this.id)");   
                            test.attr("id",i++);
                            
                        }
                        $(".dropped").droppable({
                            drop: function( event, ui ) {
                                //alert($(this).attr("id"));
                                if(ui.draggable.attr("class").search("leaf") == -1){
                                    $(this).children(".children").append(ui.draggable.attr("id"));
                                    ui.draggable.addClass("leaf");
                                }
                                
                            }});
                        
                        $(this).append(test);
                    }
                });
                
            });
            function selected(Elem1){
                
                //alert($("#"+Elem).children(".parameters").html());
                $("#left").html("");
                $("#"+Elem1).children(".parameters").children().each(function(index,Elem){
                    $("#left").append($(Elem).attr("class")+"<input type=text class="+$(Elem).attr("class")+" value="+$(Elem).html()+"></br>");
                });
                $("#left").append("<input type=button value=Save onclick=saveparams("+Elem1+")>");
                $(".dropped").css({"z-index":"1"});
                $("#"+Elem1).css({"z-index":"2"});
            }
            
            function saveparams(Elem1){
                $("#left").children("input").each(function(index,Elem){
                    if($(Elem).attr("type").search("button")== -1){
                        //alert($(Elem).attr("class"));
                        $("#"+Elem1).children(".parameters").children("."+$(Elem).attr("class")).html(Elem.value);
                    }
                });
                
            }
            
        </script>
        <div id="left">

        </div>
        <div id="center">Центр</div>
        <div id="right">Право
            <div class="class1 drag block">клас 1
                <div class="parameters">
                    <div class="param1"></div>
                </div>
                <div class="children"></div>
            </div>
            <div class="class2 drag block">клас 2
                <div class="parameters">
                    <div class="param1"></div>
                    <div class="param2"></div>

                </div>
                <div class="children"></div>
            </div>
            <div class="class3 drag block">клас 3
                <div class="parameters">
                    <div class="param1"></div>
                    <div class="param2"></div>
                    <div class="param3"></div>
                </div>
                <div class="children"></div>
            </div>
        </div>
        <div style="clear: both"></div>

    </body>

</html>
